<!DOCTYPE html>
<html lang="Zh-en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Pattern</title>
    <link rel="stylesheet" href="xingxin.css">
</head>

<body>
    <div class="container">
    </div>
    <script>
        function Star() {
            let x = 9;
            let halt = Math.floor(x / 2);
            const container = document.querySelector('.container'); // 获取容器元素
            for (let i = 0; i <= halt; i++) {
                let stars = '';
                // 添加空格
                stars += ' '.repeat(halt - i);
                // 添加蓝色星星
                for (let j = 0; j < 2 * i + 1; j++) {
                    stars += `<span class="blue">*</span>`;
                }
                let line = document.createElement('div');
                line.innerHTML = stars; 
                container.appendChild(line);
            }

            // 下半部分 (红色)
            for (let i = halt; i >= 0; i--) {
                let stars = '';
                // 添加红色星星
                for (let j = 0; j < 2 * i + 1; j++) {
                    stars += `<span class="red">*</span>`;
                }
                let line = document.createElement('div');
                line.innerHTML = stars; 
                container.appendChild(line);
            }
        }
        Star();
    </script>
</body>

</html>